<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<div class="container">

    <h4>基础列表组</h4>
    <ul class="list-group">
        <li class="list-group-item">飞狐外传</li>
        <li class="list-group-item">雪上飞狐</li>
        <li class="list-group-item">连城诀</li>
        <li class="list-group-item">天龙八部</li>
        <li class="list-group-item">射雕英雄传</li>
        <li class="list-group-item">白马啸西风</li>
        <li class="list-group-item">鹿鼎记</li>
    </ul>
    <h4>带徽章的列表组</h4>
    <ul class="list-group">
        <li class="list-group-item">飞狐外传<span class="badge">34</span></li>
        <li class="list-group-item">雪上飞狐<span class="badge">34</span></li>
        <li class="list-group-item">连城诀<span class="badge">34</span></li>
        <li class="list-group-item">天龙八部<span class="badge">34</span></li>
        <li class="list-group-item">射雕英雄传<span class="badge">34</span></li>
        <li class="list-group-item">白马啸西风<span class="badge">34</span></li>
        <li class="list-group-item">鹿鼎记<span class="badge">34</span><span class="badge">34</span></li>
    </ul>

    <h4>连接列表组</h4>
    <ul class="list-group">
        <li class="list-group-item">
            <a href="javaScript:">飞狐外传</a>
        </li>
        <li class="list-group-item">雪上飞狐</li>
        <li class="list-group-item">连城诀</li>
        <li class="list-group-item">天龙八部</li>
        <li class="list-group-item">射雕英雄传</li>
        <li class="list-group-item">白马啸西风</li>
        <li class="list-group-item">鹿鼎记</li>
    </ul>
    <h4>其他元素的支持</h4>
    <h4>还可以使用div a button等元素制作列表组</h4>
    <div class="list-group">
        <button class="list-group-item" type="button">笑傲江湖<span class="badge">30</span></button>
        <button class="list-group-item">书剑恩仇录<span class="badge">30</span></button>
        <button class="list-group-item">神雕侠侣<span class="badge">30</span></button>
        <button class="list-group-item">侠客行<span class="badge">30</span></button>
        <button class="list-group-item">倚天屠龙记<span class="badge">30</span></button>
        <button class="list-group-item">碧血剑<span class="badge">30</span></button>
        <button class="list-group-item">鸳鸯剑<span class="badge">30</span></button>
    </div>
    <div class="list-group">
        <a href="javaScript:" class="list-group-item">
            <h4 class="list-group-item-heading">笑傲江湖</h4>
            <p class="list-group-item-text">得赖恒竹味偏能</p>
        </a>
        <a href="javaScript:" class="list-group-item">
            <h4 class="list-group-item-heading">笑傲江湖</h4>
            <p class="list-group-item-text">得赖恒竹味偏能</p>
        </a>
        <a href="javaScript:" class="list-group-item">
            <h4 class="list-group-item-heading">笑傲江湖</h4>
            <p class="list-group-item-text">得赖恒竹味偏能</p>
        </a>
        <a href="javaScript:" class="list-group-item">
            <h4 class="list-group-item-heading">笑傲江湖</h4>
            <p class="list-group-item-text">得赖恒竹味偏能</p>
        </a>
    </div>

    <h4>列表主题</h4>
    <div class="list-group">
        <a href="javaScript:" class="list-group-item list-group-item-success">笑傲江湖</a>
        <a href="javaScript:" class="list-group-item list-group-item-info">笑傲江湖</a>
        <a href="javaScript:" class="list-group-item list-group-item-warning">笑傲江湖</a>
        <a href="javaScript:" class="list-group-item list-group-item-danger">笑傲江湖</a>

    </div>
</div>
</body>
</html>